<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2024-01-24 14:08:24
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的活动 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <div class="left">
          <div class="pic">
            <img :src="msg.file_url" alt="" />
          </div>
          <div class="msg">
            <h4>{{ msg.title }}</h4>
            <p>学习天数超过{{ study_days_out }}%的用户~</p>
          </div>
        </div>
        <div class="right">
          <div class="taps">
            <div class="biao">
              <img
                src="../../../assets/img/activeNew/activeIndex_new11.png"
                alt=""
              />
              <p>学习打卡</p>
            </div>
            <div class="num">
              <span>{{ daka }}</span>
              <p>天</p>
            </div>
          </div>
          <div class="taps">
            <div class="biao">
              <img
                src="../../../assets/img/activeNew/activeIndex_new11.png"
                alt=""
              />
              <p>累计学习</p>
            </div>
            <div class="num">
              <span>{{ parseInt(ljxx / 60) }}</span>
              <p>分钟</p>
            </div>
            <div class="zhengshu" @click="dialogVisible = true">
              下载学时证书
            </div>
          </div>
          <div class="taps">
            <div class="biao">
              <img
                src="../../../assets/img/activeNew/activeIndex_new6.png"
                alt=""
              />
              <p>今日学习</p>
            </div>
            <div class="num">
              <span>{{ parseInt(jrxx / 60) }}</span>
              <p>分钟</p>
            </div>
          </div>
        </div>
      </div>
      <div class="rili">
        <div id="LBChart" :style="{ width: '100%', height: '400px' }"></div>
        <div class="tiaojian">
          <div class="nianfen">
            <el-dropdown trigger="click" @command="lala">
              <span class="title">
                {{ yearTitle }}<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="item"
                  v-for="(item, index) in datalist"
                  :key="index"
                  >{{ item.title }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="shichang">
            <p>学习时长</p>
            <span style="background: #e5e9f2"></span>
            <span style="background: #9cdbc9"></span>
            <span style="background: #39b794"></span>
            <span style="background: #08a579"></span>
          </div>
        </div>
      </div>
      <div class="classContent" v-if="nothingAll">
        <div class="top">
          <h3>已解锁课程</h3>
          <div class="taps">
            <div
              class="tap"
              v-for="item in taps"
              :key="item.id"
              :class="{ choseTap: item.id == xxjd }"
              @click="chosetaps(item.id)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="classLists">
          <div class="box" v-for="item in yjsLists" :key="item.id">
            <div class="left">
              <img :src="item.file_url" alt="" />
            </div>
            <div class="detalis">
              <h4>{{ item.title }}</h4>
              <p>学完{{ item.yxx_nums }}讲 / 共计{{ item.jcjxksub_nums }}讲</p>
              <el-progress
                :percentage="item.jd"
                :stroke-width="6"
                color="#08A579"
              ></el-progress>
              <p>上次学到：{{ item.jcjxksub_title }}</p>
            </div>
            <div class="right">
              <div class="study" @click="goAcDetails(item.id)">继续学习</div>
            </div>
          </div>
          <div class="pic" v-if="nothing1">
            <img src="../../../assets/img/activeNew/noclass.png" alt="">
            <p>暂无相关内容</p>
          </div>
        </div>
      </div>
      <div class="classContent">
        <div class="top">
          <h3>正在学习</h3>
          <div class="taps">
            <div
              class="tap"
              v-for="item in taps2"
              :key="item.id"
              :class="{ choseTap: item.id == classType }"
              @click="chosetaps2(item.id)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="classLists">
          <div class="box" v-for="item in xxLists" :key="item.id">
            <div class="left">
              <img :src="item.file_url" alt="" />
            </div>
            <div class="detalis">
              <h4>{{ item.title }}</h4>
              <p v-if="classType == 1">
                学完{{ item.yxx_nums }}讲 / 共计{{ item.jcjxksub_nums }}讲
              </p>
              <el-progress
                :percentage="item.jd"
                :stroke-width="6"
                color="#08A579"
                v-if="classType == 1"
              ></el-progress>
              <p v-if="classType == 1">上次学到：{{ item.jcjxksub_title }}</p>
            </div>
            <div class="right">
              <div class="study" @click="gohdDetails(item.id)">继续学习</div>
            </div>
          </div>
          <div class="pic" v-if="nothing2">
            <img src="../../../assets/img/activeNew/noclass.png" alt="">
            <p>暂无相关内容</p>
          </div>
        </div>
      </div>
      <!-- 下载学时证明弹窗 -->
      <div class="xiazaizs">
        <el-dialog
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          width="812px"
          top="20vh"
        >
          <h2>下载学时证明</h2>
          <div class="boxTop">
            <span>选择时间段：</span>
            <el-date-picker
              v-model="riqi"
              type="daterange"
              :editable="false"
              :unlink-panels="true"
              size="large"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-value="defaultValue"
              @change="changeRili">
              
            </el-date-picker>
            <!-- <el-select v-model="grade" placeholder="请选择" @change="selectGrade">
              <el-option
                v-for="(item, index) in gradeList"
                :key="index"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
            <div class="chaxun" @click="searchZh">
              查询
            </div>
          </div>
          <div class="biao">
            <div class="leibie lie">证书类别</div>
            <div class="name lie">姓名</div>
            <!-- <div class="sjd lie">统计时间段</div> -->
            <div class="nj lie">年级</div>
            <div class="zsc lie">学习总时长</div>
            <div class="xxzs lie">学习总数</div>
            <div class="dosome lie">操作</div>
          </div>
          <div class="biao biaoList" v-for="item in zsLists" :key="item.id">
            <div class="leibie lie">{{item.type == 1?'市/区教委证书':'平台证书'}}</div>
            <div class="name lie">{{item.true_name}}</div>
            <!-- <div class="sjd lie">{{timeStamp2String(item.start_time*1000,2)}} 至 {{timeStamp2String(item.end_time*1000,2)}}</div> -->
            <div class="nj lie">{{item.nianji_id == 9?'高一':item.nianji_id == 10?'高二':'高三'}}</div>
            <div class="zsc lie">{{item.all_times>0?formatSeconds2(item.all_times):'————'}}</div>
            <div class="xxzs lie">{{item.get_times_h}}学时</div>
            <div class="dosome lie"><span style="color:#08A579;" @click="downzs(item)">下载</span><span style="color:#F6444E;" @click="delstudycertlog(item.id)">删除</span></div>
          </div>
          <!-- 分页部分 -->
          <div class="page1" v-if="counts > 5">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              background
              :page-sizes="[5, 10, 20]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="counts"
            >
            </el-pagination>
          </div>
          <div class="msg">
            <p style="margin-top:28px">注意事项：</p>
            <p>1.学时统计说明，本学时证明仅统计有效学习时长，重复观看不做重复时长统计；</p>
            <p>2.需完成个人信息验证，才可下载学时证。<span @click="openYanzheng">去完成信息验证</span></p>
          </div>
        </el-dialog>
      </div>
      <!-- 个人信息验证弹窗 -->
      <div class="yanzheng">
        <el-dialog
          :visible.sync="dialogVisible_yanzheng"
          :before-close="handleClose_yanzheng"
          width="540px"
          top="18vh"
        >
          <h2>个人信息验证</h2>
          <div class="xinxiContent">
            <div class="biao">
              <div class="left">姓名</div>
              <div class="right"><input type="text" v-model="name" placeholder="请输入姓名" /></div>
              </div>
            <div class="biao">
              <div class="left">手机号</div>
              <div class="right"><input type="text" v-model="tel" placeholder="请输入手机号" /></div>
            </div>
            <div class="biao">
              <div class="left">验证码</div>
              <div class="right"><input type="text" v-model="yzm" placeholder="请输入验证码" />
              <span class="yzm" @click="getDx" v-if="!djsShow">获取验证码</span>
              <span class="yzm" v-if="djsShow" style="color:#999">重新发送 {{ countdown }}s</span></div>
            </div>
            <div class="biao">
              <div class="left">地区</div>
              <div class="right">
                <div class="adreess" ref="box">
                  <!-- @click="choseSSQ = !choseSSQ" 地区暂时不让更改，取消点击出现选择地区栏 -->
                  <div class="indput">
                    <input
                      type="text"
                      @click="choseSSQ = !choseSSQ"
                      :value="adreess"
                      placeholder="请选择地区"
                    />
                    <i class="el-icon-arrow-down jiantou" @click="choseSSQ = !choseSSQ" v-if="!choseSSQ"></i>
                    <i class="el-icon-arrow-up jiantou" @click="choseSSQ = !choseSSQ" v-if="choseSSQ"></i>
                  </div>
                  <div class="adreessBox" v-show="choseSSQ">
                    <div class="preBox box">
                      <div
                        class="list"
                        v-for="item in provincecodeList"
                        :key="item.code"
                        @click="chosePre(item.code, item.name)"
                        :class="{ select_color: provincecode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="cityBox box" v-if="cityList.length > 0">
                      <div
                        class="list"
                        v-for="item in cityList"
                        :key="item.code"
                        @click="choseCity(item.code, item.name)"
                        :class="{ select_color: citycode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="areaBox box" v-if="areaList.length > 0">
                      <div
                        class="list"
                        v-for="item in areaList"
                        :key="item.code"
                        @click="choseArea(item.code, item.name)"
                        :class="{ select_color: areacode == item.code }"
                      >
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="biao">
              <div class="left">学校</div>
              <div class="right">
                <el-select
                  v-model="school"
                  filterable
                  allow-create
                  placeholder="请选择"
                  @change="changeSchool"
                >
                  <el-option
                    v-for="item in schoolList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="biao">
              <div class="left">职务</div>
              <div class="right">
                <el-select
                  v-model="zhiwu_id"
                  placeholder="请选择"
                  @change="changeZhiwu"
                >
                  <el-option
                    v-for="item in zhiwuList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <p class="tips">
              Tips：信息提交后，不支持重新修改，请您仔细核对
          </p>
          <div class="submit" @click="submitUserInfo">确认提交信息</div>
        </el-dialog>
      </div>
      <!-- 查询和生成证书弹窗 -->
      <div class="chaxun">
        <el-dialog
          :visible.sync="dialogVisible_chaxun"
          :before-close="handleClose_chaxun"
          width="812px"
          top="18vh"
        >
          <h2>查询证书</h2>
          <div class="zhengshuType">
            <div class="type1" @click="changeZsType(1)">
              <!-- <img
                src="../../../assets/img/images/floting_nochose.png"
                v-show="zsType == 2"
                
              />
              <img
                src="../../../assets/img/images/floting_chosed.png"
                v-show="zsType == 1"
              /> -->
              <p>市/区教委证书</p>
            </div>
            <!-- <div class="type1" style="margin-left:20px" @click="changeZsType(2)">
              <img
                src="../../../assets/img/images/floting_nochose.png"
                v-show="zsType == 1"
                
              />
              <img
                src="../../../assets/img/images/floting_chosed.png"
                v-show="zsType == 2"
              />
              <p>平台证书</p>
            </div> -->
          </div>
          <!-- <div class="xinxiContent">
            <div class="biao">
              <div class="left">姓名</div>
              <div class="right">{{zs_name}}</div>
            </div>
            <div class="biao">
              <div class="left">学时</div>  
              <div class="right">{{zs_all_times>0?formatSeconds2(zs_all_times):'无学时'}}</div>
            </div>
            <div class="biao">
              <div class="left">课程时长</div>
              <div class="right">{{formatSeconds2(zs_course_times)}}/课时</div>
            </div>
            <div class="biao">
              <div class="left">统计时间段</div>
              <div class="right">{{timeStamp2String(zs_start_time*1000,2)}} 至 {{timeStamp2String(zs_end_time*1000,2)}}</div>
            </div>
          </div> -->
          <div class="biao">
            <div class="leibie lie">证书类别</div>
            <div class="name lie">姓名</div>
            <!-- <div class="sjd lie">统计时间段</div> -->
            <div class="nj lie">年级</div>
            <div class="zsc lie">学习总时长</div>
            <div class="xxzs lie">学习总数</div>
            <div class="dosome lie">操作</div>
          </div>
          <div class="biao biaoList" v-for="item in zsInfoLists" :key="item.id">
            <div class="leibie lie">{{item.type == 1?'市/区教委证书':'平台证书'}}</div>
            <div class="name lie">{{item.true_name}}</div>
            <!-- <div class="sjd lie">{{timeStamp2String(item.start_time*1000,2)}} 至 {{timeStamp2String(item.end_time*1000,2)}}</div> -->
            <div class="nj lie">{{item.nianji_id == 9?'高一':item.nianji_id == 10?'高二':'高三'}}</div>
            <div class="zsc lie">{{item.all_times>0?formatSeconds2(item.all_times):'————'}}</div>
            <div class="xxzs lie">{{item.get_times_h}}学时</div>
            <!-- <div class="dosome lie"><span style="color:#08A579;" @click="downzs(item)">下载</span><span style="color:#F6444E;" @click="delstudycertlog(item.id)">删除</span></div> -->
            <div class="dosome lie" @click="createstudycert(item.id)" style="color: #08A579; cursor: pointer; user-select: none;">生成学时证书</div>
          </div>
          <p class="tips">
              Tips：市/区教委证书和平台学时证书时间不通用，如对学时有质疑，可联系平台客服
          </p>
          <!-- <div class="submit" v-if="zs_all_times>600" @click="createstudycert">生成学时证书</div> -->
        </el-dialog>
      </div>
      <!-- 学时证书html -->
      <div class="zsPic">
        <el-dialog
          :visible.sync="dialogVisible_zhengshu"
          :before-close="handleClose_zhengshu"
          width="1163px"
          top="4vh"
        >
          <div class="haha" ref="imageDom">
            <div class="zhengshu" >
              <img class="ditu" crossOrigin="anonymous" :src="zsdi_file_url" alt="">
              <!-- <div class="name" >{{zs_username}}同志:</div> -->
              <p class="wenan" :style="{left:txt_xy[0]+'px',top:txt_xy[1]+'px'}">{{txt_info}}</p>
              <img class="zhang" crossOrigin="anonymous" :src="seal_file_url" :style="{right:seal_file_url_xy[0]+'px',bottom:seal_file_url_xy[1]+'px'}" alt="">
              <!-- <div class="zhengming">
                特此证明
              </div> -->
              <div class="bianhao" :style="{left:numbers_xy[0]+'px',bottom:numbers_xy[1]+'px'}">
                证书编号:{{numbers}}
              </div>
              <div class="nyr">
                {{timeStamp2String(data_time*1000,1)}}
              </div>
            </div>
          </div>
          <div class="submit" style="margin-top:0px" @click="down">点击下载</div>
        </el-dialog>
      </div>
      <!-- 学时证书图片 -->
      <div class="zsPic">
        <el-dialog
          :visible.sync="dialogVisible_zhengshuPic"
          :before-close="handleClose_zhengshuPic"
          width="1163px"
          top="4vh"
        >
        <div class="zhengshu">
          <img style="width:100%" :src="zhengshuPic" alt="">
        </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import html2canvas from "html2canvas";
import * as qiniu from "qiniu-js";
import { timeStamp2String } from "../../../utils/time";
import {
  userinfo,
  setuserinfo,
  mycourse,
  my_jcjxk,
  activitylists_my,
  askordersfp,
  kejianfl,
  list_systypes,
  pca,
  school,
  studycertloglist,
  studycertinfo,
  createstudycert,
  studycertimgtolocal,
  delstudycertlog,
  sendverf,
  checkphone,
  qiniuconfig,
  studycertaccountinfo,
  setstudycertaccountinfo,
  nianjilists,
  checkschool,
  studycertcheckphone
} from "../../../api/http";
export default {
  name: "changeClass",
  components: {},
  props: ["msg"],
  data() {
    return {
      defaultValue: new Date(),
      timeStamp2String,
      kemu_id: "", //科目id
      file_url: "", //头像
      name: "", //姓名昵称
      daka: "", //打卡时间
      ljxx: "", //累计学习时间
      jrxx: "", //今日学习时间
      study_days_out: "", //超过百分比
      xxjd: 0, //全部和是否学完
      taps: [
        { id: 0, title: "全部" },
        { id: 1, title: "已学完" },
        { id: 2, title: "未学完" },
      ], //学习进度类型
      classType: 1, //课程或直播
      taps2: [
        { id: 1, title: "课程" },
        { id: 2, title: "直播" },
      ], //课程直播类型
      yjsLists: [], //已解锁列表
      xxLists: [], //正在学习列表
      num: "",
      nowYear: new Date().getFullYear(),
      datalist: [],
      yearTitle: "", //进度名称
      start_year: "", //进度开始年份
      end_year: "", //进度结束年份
      nothingAll:false,//已解锁全部空图
      nothing1:false,//已解锁课程空图
      nothing2:false,//正在学习课程空图

      hotPhoneList:[],//

      dialogVisible:false,//下载学时证明弹窗
      riqi:[new Date(1690819200000),new Date(1703952000000)],//选择的日期范围
      start_time:'',//开始的时间戳
      end_time:'',//结束的时间戳
      zsLists:[],//证书列表

      dialogVisible_yanzheng:false,//个人信息验证弹窗
      tel:'',//电话号码
      yzm:'',//获取验证码
      adreess: "",
      school: "", //所在学校
      school_id: "", //学校id
      schoolList: [], //可选学校列表
      provincecodeList: [], //省列表
      cityList: [], //市列表
      areaList: [], //区列表
      provincecode: "", //省id
      citycode: "", //市id
      areacode: "", //区id
      province: "", //省名称
      city: "", //市名称
      area: "", //区名称
      choseSSQ: false, //省市区选择框的显示隐藏
      zhiwuList: [], //职务列表
      zhiwu_id: "", //岗位职务id

      djsShow: false, //重新发送倒计时显示隐藏
      countdown: 60, //短信验证码再次发送倒计时
      dxTimer: null, //重新获取验证码倒计时

      dialogVisible_chaxun:false,//查询和生成证书弹窗 
      zsType:1,// 区教委证书类型1 平台证书类型2


      zsInfoLists:[],//查询到的证书详情列表
      zs_name:'',//证书详情中的用户姓名
      zs_course_times:'',//证书详情里的课程时长(秒)
      zs_start_time:'',//证书详情里的开始时间
      zs_end_time:'',//证书详情里的结束时间
      zs_all_times:'',//证书详情里的学习总时长

      dialogVisible_zhengshu:false,//证书图片展示隐藏
      log_id:'',//学时证书生成记录id
      wz_id:'',//生成证书的id
      numbers:"",//证书编号
      get_times_h:'',//完成学时
      zsdi_file_url:'',//证书底图
      seal_file_url:'',//印章图片,公章图片
      txt_info:'',//证书文本
      zs_title:'',//证书名称
      zs_username:'',//证书人姓名
      txt_xy:'',//文本坐标
      seal_file_url_xy:'',//公章坐标
      numbers_xy : '',//编号坐标
      baseurl:'',
      upload_path:'',
      pic_url:'',

      dialogVisible_zhengshuPic:false,
      zhengshuPic:'',
      page:1,
      page_size:5,
      currentPage:1,
      counts: 0, //当前请求到的课件总条数用于分页显示总数

      grade: 9, //选择的年级id
      gradeList: [], //年级列表

      data_time:'',//证书上显示时间

    };
  },
  created() {
    const arr = ['12', '13', '67']
    console.log(arr.map(Number))
    this.start_year = this.nowYear - 1;
    this.end_year = this.nowYear;
    this.yearTitle = "最近一年";
    this.datalist = [
      { title: "最近一年", start: this.nowYear - 1, end: this.nowYear },
      {
        title: "" + (this.nowYear - 2) + "-" + (this.nowYear - 1) + "年",
        start: this.nowYear - 2,
        end: this.nowYear - 1,
      },
      {
        title: "" + (this.nowYear - 3) + "-" + (this.nowYear - 2) + "年",
        start: this.nowYear - 3,
        end: this.nowYear - 2,
      },
    ];
    console.log(this.datalist, this.nowYear);
    this.kemu_id = this.msg.kemu_id;
    this.getMycourse(); //获取我的课程页进度相关信息
    this.getyjsClass(); //获取已解锁课程列表
    this.getxxClass(); //获取正在学习课程列表
    this.getZbClass(); //获取正在学习的直播课程列表
    this.getlogLists();
    this.getSchoolLists();//获取学校列表
    // this.getNj();//获取年级列表
    //获取省市区数据
    pca({
      type: "p",
    }).then((res) => {
      console.log(res, "省份数据 ");
      this.provincecodeList = res.retRes;
    });
    //获取职务分类列表
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "zhiwu",
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "职务列表");
        this.zhiwuList = res.retRes;
      }
    });
  },
  mounted() {
    console.log(this.formatSeconds(1000));
  },
  beforeDestroy() {},
  methods: {
    //获取年级列表
    getNj(){
      nianjilists().then((res) => {
        if (res.retInt == 1) {
          const data = res.retRes;
          this.gradeList = data;
        } else if (res.retInt != 1) {
          this.$notify.error({
            title: "错误",
            message: res.retErr,
            showClose: false,
          });
        }
      });
    },
    //获取学时证书记录列表
    getlogLists(){
      studycertloglist({
        md5key: localStorage.getItem("md5key"),
        page:this.page,
        page_size:this.page_size
      }).then(res=>{
        console.log(res,"已有的学时证书记录列表")
        this.zsLists = res.retRes;
        this.counts = res.retCounts;
      })
    },
    //分页
    //调整每页条数
    handleSizeChange(val) {
      console.log("每页条数调整为", val);
      this.page_size = val;
      this.page = 1;
      this.currentPage = 1;
      this.getlogLists()
    },
    //跳转第几页
    handleCurrentChange(val) {
      console.log("当前页为第", val);
      this.page = val;
      this.getlogLists()
    },
    //切换年纪
    selectGrade(e){
      console.log(this.grade)
    },
    //下载
    downzs(item){
      this.dialogVisible_zhengshuPic = false
      // this.zhengshuPic =  this.$globalUrl + item.cert_file_url;
      if(item.cert_file_url.indexOf("https")>-1){
        this.zhengshuPic =  item.cert_file_url;
      }else{
        this.zhengshuPic =  this.$globalUrl + item.cert_file_url;
      }
      
      this.dialogVisible_zhengshuPic = true
      this.downCode(this.zhengshuPic,"证书")
    },
    //删除证书记录
    delstudycertlog(id){
      delstudycertlog({
        md5key: localStorage.getItem("md5key"),
        id:id
      }).then(res=>{
        if(res.retInt == 1){
          this.getlogLists()
        }
      })
    },
    //查询证书详情
    searchZh(){
      console.log(this.riqi)
      if(this.riqi){
        studycertaccountinfo({
          md5key: localStorage.getItem("md5key"),
        }).then(res=>{
          console.log(res)
          const data = res.retRes;
          if(data.jbxx_set == 0){
            this.name = data.true_name;
            this.tel = data.account;
            this.provincecode = data.provincecode;
            this.citycode = data.citycode;
            this.citycode = data.citycode;
            this.areacode = data.areacode;
            this.zhiwu_id = data.zhiwu_id;
            this.province = data.province;
            this.city = data.city;
            this.area = data.area;
            this.adreess = this.province + this.city + this.area;
            if(data.school_id == 1){
              this.school = '';
              this.school_id= '';
            }else{
              this.school = data.school_title;
              this.school_id = data.school_id;
            }
            this.getSchoolLists();//获取学校列表
            this.dialogVisible_yanzheng = true;
          }else{
            this.start_time = new Date(this.riqi[0]).getTime()/1000
            this.end_time = new Date(this.riqi[1]).getTime()/1000
            studycertinfo({
              md5key: localStorage.getItem("md5key"),
              start_time:this.start_time,
              end_time:this.end_time,
              // nianji_id:this.grade,
            }).then(res=>{
              console.log(res,"查询证书详情")
              
              if(res.retInt == 1){
                  if(res.retRes.length == 0){
                    this.$message('未查询到证书')
                  }else{
                    this.zsInfoLists = res.retRes;
                    this.dialogVisible_chaxun = true
                  }
                // this.zs_all_times = this.zsInfoLists[0].all_times;
                // this.zs_name = this.zsInfoLists[0].true_name;
                // this.zs_course_times = this.zsInfoLists[0].course_times;
                // this.zs_start_time = this.zsInfoLists[0].start_time;
                // this.zs_end_time = this.zsInfoLists[0].end_time;
                // this.zsType = this.zsInfoLists[0].type;
                
              }else{
                this.$message(res.retErr)
              }
              
            })
          }
        })
      }else{
        this.$message({
          message: "请选择时间段",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      }
    },
    //生成图片上传七牛云
    clickGeneratePicture() {
      html2canvas(this.$refs.imageDom,{
      useCORS: true,
      backgroundColor: null,
      scale: 1.5,
      }).then((canvas) => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png");
        var img = this.base64ToFile(this.imgUrl)
        this.imgUrl = this.blobToFile(img, 'zhengshu.png');
        console.log(this.imgUrl)
        //file是选择的文件对象
          qiniuconfig({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            //获取后台返的token  和域名
            this.baseurl = res.retRes.file_base;
            this.upload_path = res.retRes.upload_path;
            let uptoken = res.retRes.qiniu_token;
            let file = this.imgUrl;
            let key =
              this.upload_path +
              timeStamp2String(new Date().getTime(), 12) +
              "/" +
              new Date().getTime() +
              Math.floor(Math.random() * 1000) +
              file.name.substring(file.name.lastIndexOf("."), file.name.length); //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
            var config = {
              useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
              // region: qiniu.region.z0, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。
              domain: "https://static.idianjiao.com", //配置好的七牛云域名
              chunkSize: 100, //每个分片的大小，单位mb，默认值3
              forceDirect: true, //直传还是断点续传方式，true为直传
            };
            var putExtra = {
              fname: file.name, //文件原始文件名
              params: {},
              mimeType: [] || null,
            };
            var observable = qiniu.upload(file, key, uptoken, putExtra, config);
            observable.subscribe({
              complete: (result) => {
                //上传成功后触发。包含文件地址。
                console.log(file.name, "ahah");
                console.log(this.baseurl + "/" + result.key, "aheihei");
                this.pic_url = this.baseurl + "/" + result.key;
                studycertimgtolocal({
                  md5key: localStorage.getItem("md5key"),
                  log_id:this.log_id,
                  file_url:this.pic_url,
                  id:this.wz_id,
                }).then(res=>{
                  console.log(res,"ceshi esjhi")
                  
                  this.zhengshuPic =  this.$globalUrl+res.retRes.file_url
                  // this.downCode(this.zhengshuPic,"zhengshu")
                  // this.dialogVisible_zhengshuPic = true
                  // this.dialogVisible_zhengshu = false
                })   
              },
              error: (err) => {
                //上传错误后触发
                this.dialogVisible_zhengshu = false
                this.$message('生成证书失败，请重试')
              },
            });
          });
      });
    },
    //生成证书后的点击下载
    down(){
      this.downCode(this.zhengshuPic,"zhengshu")
    },
    downCode(imgsrc,name) {
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function() {
          var canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height

          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          var url = canvas.toDataURL('image/png')
          var a = document.createElement('a')
          // 创建一个单击事件
          var event = new MouseEvent('click')
          a.download = name
          a.href = url

          // 触发a的单击事件
          a.dispatchEvent(event)
      }
      image.src = imgsrc;
      this.$Message('下载成功');
    },
    //将base64转换为blob
    base64ToFile(urlData){
      const arr = urlData.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bytes = atob(arr[1]);
      let n = bytes.length;
      const ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new Blob([ia], { type: mime });
    },
    // 将blob转换为file
    //blob格式文件加上name和lastModifiedDate属性之后，就转成的file格式
    blobToFile(theBlob, fileName){
       theBlob.lastModifiedDate = new Date(); 
       theBlob.name = fileName;
       return theBlob;
    },
    //打开个人信息提交弹窗并回填
    openYanzheng(){
       studycertaccountinfo({
        md5key: localStorage.getItem("md5key"),
      }).then(res=>{
        console.log(res)
        const data = res.retRes;
        this.name = data.true_name;
        this.tel = data.account;
        this.provincecode = data.provincecode;
        this.citycode = data.citycode;
        this.citycode = data.citycode;
        this.areacode = data.areacode;
        this.school_id = data.school_id;
        this.zhiwu_id = data.zhiwu_id;
        this.province = data.province;
        this.city = data.city;
        this.area = data.area;
        this.adreess = this.province + this.city + this.area;
        if(data.school_id == 1){
          this.school = '';
          this.school_id= '';
        }else{
          this.school = data.school_title;
          this.school_id = data.school_id;
        }
        this.getSchoolLists();//获取学校列表
        this.dialogVisible_yanzheng = true;
      })
    },
    //提交个人信息
    submitUserInfo(){
      if (!this.name) {
        this.$message({
          message: "请填写真实姓名",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.areacode) {
        this.$message({
          message: "请选择所在省市区",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.school_id && !this.school) {
        this.$message({
          message: "请选择所在学校",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else if (!this.tel) {
        this.$message({
          message: "请填写手机号码",
          duration: 1000,
          showClose: false,
        });
      }else if (!this.yzm) {
        this.$message({
          message: "请填写验证码",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      }  else if (!this.zhiwu_id) {
        this.$message({
          message: "请选择岗位职务",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else {
        studycertcheckphone({
          md5key: localStorage.getItem("md5key"),
          account:this.tel,
          msg_verf:this.yzm
        }).then(res=>{
          if(res.retInt == 1){
            setstudycertaccountinfo({
              md5key: localStorage.getItem("md5key"),
              school_id: this.school_id,
              zhiwu_id: this.zhiwu_id,
              true_name: this.name,
              account: this.tel,
              provincecode: this.provincecode,
              citycode: this.citycode,
              areacode: this.areacode,
              school_title:this.school,
            }).then((res) => {
              if (res.retInt == 1) {
                this.dialogVisible_yanzheng = false
                this.$message({
                  message: "提交成功！",
                  duration: 1000,
                  showClose: false,
                  offset: 300,
                });
              }
            });
          }else{
            this.$message({
              message: res.retErr,
              duration: 1000,
              showClose: false,
              offset: 300,
            });
          }
        })
        
      }
    },
    //切换证书类型
    changeZsType(e){
      this.zsInfoLists.forEach(item=>{
        if(item.type == e){
          this.zs_all_times = item.all_times;
          this.zs_name = item.true_name;
          this.zs_course_times = item.course_times;
          this.zs_start_time = item.start_time;
          this.zs_end_time = item.end_time;
        }
        this.zsType = e
      })
    },
    //生成学时证书
    createstudycert(id){
      createstudycert({
        md5key: localStorage.getItem("md5key"),
        type:this.zsType,
        start_time:this.start_time,
        end_time:this.end_time,
        id:id
      }).then(res=>{
        if(res.retInt ==1){
          console.log(res,"生成学时证书")
          this.log_id = res.retRes.log_id;
          this.wz_id = res.retRes.id;
          this.numbers = res.retRes.numbers;
          this.get_times_h = res.retRes.get_times_h;
          this.zsdi_file_url = res.retRes.file_url;
          this.seal_file_url = res.retRes.seal_file_url;
          this.txt_info = res.retRes.txt_info;
          this.zs_title = res.retRes.title;
          this.zs_username = res.retRes.true_name;
          this.data_time = res.retRes.data_time;
          this.txt_xy = (res.retRes.txt_xy.split(',')).map(Number);
          this.seal_file_url_xy = (res.retRes.seal_file_url_xy.split(',')).map(Number);
          this.numbers_xy = (res.retRes.numbers_xy.split(',')).map(Number);
          this.dialogVisible_zhengshu = true
          setTimeout(()=>{
            this.clickGeneratePicture();
          },200)
        }else{
          this.$message(res.retErr)
        }
      })
    },
     //获取短信验证码
    getDx() {
      //电话号码正则验证，如果通过就发送验证码
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const reg_yzm = /^\d{6}$/;
      if (this.tel.trim() == "") {
        this.$message('请填写手机号')
      } else if (!reg_tel.test(this.tel)) {
        this.$message('手机号格式错误')
      } else {
        //手机号码正常，发送短信验证码并倒计时60秒后才可重新发送
        sendverf({
          phone: this.tel ? this.tel : "",
        }).then((res) => {
          if (res.retInt == 1) {
            this.dxTimer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.djsShow = true;
                  console.log("daojishi");
                } else {
                  this.djsShow = false;
                  this.countdown = 60;
                  clearInterval(this.dxTimer);
                  console.log("倒计时");
                }
              }
            }, 1000);
          }
        });
      }
    },
    //关闭下载学时证明弹窗
    handleClose(){
      this.dialogVisible = false
    },
    //关闭个人信息验证弹窗
    handleClose_yanzheng(){
      this.dialogVisible_yanzheng = false
    },
    //关闭查询和生成弹窗
    handleClose_chaxun(){
      this.changeZsType(1)
      this.getlogLists()
      this.dialogVisible_chaxun = false
    },
    //关闭查询和生成弹窗
    handleClose_zhengshu(){
      studycertinfo({
        md5key: localStorage.getItem("md5key"),
        start_time:this.start_time,
        end_time:this.end_time,
        // nianji_id:this.grade,
      }).then(res=>{
        console.log(res,"查询证书详情")
        if(res.retInt == 1){
          if(res.retRes.length == 0){
            this.getlogLists()
            this.dialogVisible_chaxun = false
          }else{
            this.zsInfoLists = res.retRes;
            this.dialogVisible_chaxun = true
          }
        }
      })
      this.dialogVisible_zhengshu = false
    },
    handleClose_zhengshuPic(){
      this.dialogVisible_zhengshuPic = false
    },
    //选择省
    chosePre(code, name) {
      console.log(code);
      this.provincecode = code;
      this.province = name + "/";
      this.citycode = "";
      this.city = "";
      this.areacode = "";
      this.area = "";
      this.areaList = [];
      pca({
        type: "c",
        pcode: this.provincecode,
      }).then((res) => {
        console.log(res, "城市数据 ");
        this.cityList = res.retRes;
      });
    },
    //选择市
    choseCity(code, name) {
      this.citycode = code;
      this.city = name + "/";
      this.areacode = "";
      this.area = "";
      pca({
        type: "a",
        pcode: this.citycode,
      }).then((res) => {
        console.log(res, "地区数据 ");
        this.areaList = res.retRes;
      });
    },
    //选择区
    choseArea(code, name) {
      this.areacode = code;
      this.area = name;
      this.choseSSQ = false;
      this.adreess = this.province + this.city + this.area;
      this.getSchoolLists();//获取学校列表
    },
    //获取学校列表
    getSchoolLists(){
      //获取学校列表
      school({
        provincecode: this.provincecode,
        citycode: this.citycode,
        areacode: this.areacode,
      }).then((res) => {
        this.schoolList = [];
        console.log(res, "学校列表");
        if (res.retInt == 1) {
          const data = res.retRes;
          this.schoolList = data;
          this.schoolList.forEach((item,index)=>{
            if(item.id == 1){
              this.schoolList.splice(index,1)
            }
          })
        }
      });
    },
    //选择学校
    changeSchool(e) {
      console.log(e, typeof this.school, this.school);
      if (typeof this.school == "string") {
        console.log("不存在的学校");
        
        //输入的不存在的学校就查询并创建
        if (this.provincecode == "") {
          this.$notify.error({
            title: "错误",
            message: "请先选择省市区",
            duration: 2000,
            showClose: false,
          });
        } else {
          this.school_id = ''
          console.log(this.school,this.school_id)
          // checkschool({
          //   md5key: localStorage.getItem("md5key"),
          //   provincecode: this.provincecode,
          //   citycode: this.citycode,
          //   areacode: this.areacode,
          //   title: this.school,
          // }).then((res) => {
          //   if (res.retInt == 1) {
          //     console.log(res, "创建学校");
          //     this.school_id = res.retRes.id;
          //   } else {
          //     this.$notify.error({
          //       title: "错误",
          //       message: res.retErr,
          //       duration: 2000,
          //       showClose: false,
          //     });
          //   }
          // });
        }
      } else if (typeof this.school == "number") {
        console.log("已存在的学校");
        this.school_id = e;
        this.schoolList.forEach(item=>{
          if(item.id == this.school_id){
            this.school = item.title
          }
        })
        console.log(this.school,this.school_id)
      }
    },
    changeRili(e){
      console.log(e)
    },
    //选择职务
    changeZhiwu(e) {
      this.zhiwu_id = e;
    },
    //调整日期数据
    getVirtualData(year) {
      const date = +echarts.time.parse(year + "-01-01");
      const end = +echarts.time.parse(+year + 1 + "-01-01");
      const dayTime = 3600 * 24 * 1000;
      const data = [];
      for (let time = date; time < end; time += dayTime) {
        data.push([
          echarts.time.format(time, "{yyyy}-{MM}-{dd}", false),
          Math.floor(Math.random() * 10000),
        ]);
      }
      console.log(data);
      return data;
    },
    //获取我的课程页进度相关信息
    getMycourse() { 
      mycourse({
        md5key: localStorage.getItem("md5key"),
        start_year: this.start_year,
        end_year: this.end_year,
      }).then((res) => {
        // console.log(res.retRes.list);
        const data = res.retRes;
        this.study_days_out = data.study_days_out;
        this.daka = data.study_days;
        this.ljxx = data.lj_times;
        this.jrxx = data.today_times;
        // this.num = data.list;
        this.hotPhoneList = [];
        data.list.forEach((item) => {
          this.hotPhoneList.push(["" + item.ymd, item.day_times, item.level]);
        });
        if (this.hotPhoneList.length === 0) {
          let date = new Date();
          let nowMonth = date.getMonth() + 1;
          let strDate = date.getDate();
          let seperator = "-";
          if (nowMonth >= 1 && nowMonth <= 9) {
            nowMonth = "0" + nowMonth;
          }
          if (strDate >= 1 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          let nowDate =
            date.getFullYear() + seperator + nowMonth + seperator + strDate;
          console.log(nowDate);
          this.hotPhoneList = [[nowDate, 0, 0]];
        }
        // const activeList = this.hotPhoneList;

        let i = 365;
        const dayList = [];
        while (i >= 0) {
          dayList.push([this.getBeforeDate(i)]);
          i--;
        }
        // console.log(this.getBeforeDate(365))
        // console.log(this.hotPhoneList)
        
        for (let dayListElement of dayList) {
          for (let activeListElement of this.hotPhoneList) {
            if (dayListElement[0] === activeListElement[0]) {
              dayListElement.splice(1);
              dayListElement.push(activeListElement[1]);
            }else if (dayListElement.length === 1) {
              dayListElement.push(0);
            }
          }
        }
        // console.log(dayList)
        this.initEcharts(dayList);
      });
    },
    // 得到前360天的每个日期
    getBeforeDate(n) {
      var date = new Date();
      var year, month, day;
      date.setDate(date.getDate() - n);
      year = date.getFullYear()-(new Date().getFullYear()-this.end_year);
      month = date.getMonth() + 1;
      day = date.getDate();
      // console.log(date)
      return (
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day)
      );
    },
    //初始化echarts
    initEcharts(list) {
      const chartDom = document.getElementById("LBChart");
      const myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          top: 30,
          left: "center",
          text: "Daily Step Count",
          show: false,
        },
        //鼠标移入图时，通过hover效果显示每一天的日期和活跃度
        tooltip: {
          formatter(params) {
            return (
              `${params.data[0]},` +
              `
                  学习时长：` +
              `${parseInt(params.data[1] / 60)}分钟`
            );
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 10000,
          type: "piecewise",
          orient: "horizontal",
          left: "center",
          top: 65,
          pieces: [
            {
              value: 0,
              color: "#E5E9F2",
            },
            {
              min: 1,
              max: 600,
              color: "#9CDBC9",
            },
            {
              min: 601,
              max: 1800,
              color: "#39B794",
            },
            {
              min: 1801,
              color: "#08A579",
            },
          ],
        },
        calendar: {
          top: 70,
          left: 50,
          right: 20,
          wdith: 900,
          height: 120,
          cellSize: [12, 12],
          range: [this.getBeforeDate(365), this.getBeforeDate(0)],
          splitLine: {
            show: false,
          },
          itemStyle: {
            borderWidth: 10,
            borderColor: "#fff",
            borderWidth: 4,
          },
          dayLabel: {
            nameMap: ["周一", "", "周三", "", "周五", "", "周日"],
            color: "#333",
          },
          monthLabel: {
            color: "#999",
            show: true,
            nameMap: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
          yearLabel: { show: false },
        },
        series: {
          type: "heatmap",
          coordinateSystem: "calendar",
          data: list,
        },
      };

      option && myChart.setOption(option);
    },
    //时间换算
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = "" + parseInt(secondTime) + "s";

      if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + "m" + result;
      }
      if (hourTime > 0) {
        result = "" + parseInt(hourTime) + "h" + result;
      }
      // console.log('result',result);
      return result;
    },
    //时间换算
    formatSeconds2(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = parseInt(secondTime) > 0? ("" + parseInt(secondTime) + "秒"):'';

      if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + "分钟" + result;
      }
      if (hourTime > 0) {
        result = "" + parseInt(hourTime) + "小时" + result;
      }
      // console.log('result',result);
      return result;
    },
    //切换已解锁课程
    chosetaps(id) {
      console.log(id)
      this.xxjd = id;
      this.getyjsClass();
    },
    //获取已解锁课程列表
    getyjsClass() {
      my_jcjxk({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.msg.kemu_id,
        type: 1,
        xxjd: this.xxjd,
      }).then((res) => {
        console.log(res, "已解锁课程");
        this.yjsLists = res.retRes;
        if(res.retRes.length == 0 && this.xxjd == 0){
          this.nothingAll = false
          this.nothing1 = false
        }else if(res.retRes.length == 0 && this.xxjd != 0){
          this.nothingAll = true
          this.nothing1 = true
        }else{
          this.nothingAll = true
          this.nothing1 = false
        }
      });
    },
    //获取正在学习课程列表
    getxxClass() {
      my_jcjxk({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        type: 2,
      }).then((res) => {
        console.log(res, "正在学习课程");
        this.xxLists = res.retRes;
        if(res.retRes.length == 0){
          this.taps2.shift()
          this.classType = 2
          this.getZbClass();
        }else{
          this.classType = 1
        }
        console.log(this.nothing2)
      });
    },
    //获取热力图数据
    // getMycourse(){
    //     mycourse({
    //         md5key: localStorage.getItem("md5key"),
    //         start_year:'2022',
    //         end_year:'2023'
    //     }).then(res=>{
    //         console.log(res,'热力图数据')
    //     })
    // },
    //获取直播课
    getZbClass() {
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: 401,
      }).then((res) => {
        console.log(res, "直播课");
        this.xxLists = res.retRes;
        if(res.retRes.length == 0){
          this.nothing2 = true
        }else{
          this.nothing2 = false
        }
      });
    },
    //切换正在学习课程
    chosetaps2(id) {
      this.classType = id;
      this.xxLists = [];
      if (id == 1) {
        this.getxxClass();
      } else {
        this.getZbClass();
      }
    },
    lala(e) {
      console.log(e);
      this.start_year = e.start;
      this.end_year = e.end;
      this.yearTitle = e.title;
      this.getMycourse();
    },
    //继续学习
    goAcDetails(id){
      let { href } = this.$router.resolve({
        path: "/active/fullScreen",
        query: {
          id: id,
          type: "jcjx",
        },
      });
      window.open(href, "activeRes");
    },
    //继续学习
    gohdDetails(id){
      let { href } = this.$router.resolve({
        path: "/active/fullScreen",
        query: {
          id: id,
          type: this.classType == 1?'jcjx':'hd',
        },
      });
      window.open(href, "activeRes");
    },
  },
};
</script>
<style>
.el-select-dropdown__item.selected{
  color:#08a579
}
.el-date-table td.today span{
  color: #08a579;
}
.el-date-table td span:hover{
  color: #08a579;
}
.el-date-table td div:hover{
  color: #08a579;
}
.el-date-table td.end-date span, .el-date-table td.start-date span{
  background-color: #08a579;
  color: #FFF;
}
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 720px;
  margin: 0 auto;
}
.el-pagination {
  text-align: center;
  margin: 20px 80px 20px 0;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
#container {
  /deep/.el-progress-bar {
    margin: 23px 0;
    width: 206px !important;
  }
  /deep/.el-progress__text {
    font-size: 12px !important;
    margin-left: 12px;
  }
  .content {
    .top {
      display: flex;
      margin-top: 30px;
      .left {
        display: flex;
        align-items: center;
        margin-left: 40px;
        .pic {
          width: 100px;
          margin-right: 20px;
          height: 100px;
          border-radius: 100%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
        .msg {
          display: flex;
          flex-direction: column;
          h4 {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: normal;
            color: #444;
          }
          p {
            font-size: 12px;
            color: #666666;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        margin-left: 100px;
        .taps {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 40px;
          position: relative;
          .biao {
            display: flex;
            img {
              margin-right: 6px;
              width: 22px;
              height: 22px;
            }
            p {
              font-size: 16px;
              color: #333333;
            }
          }
          .num {
            display: flex;
            margin-top: 8px;
            span {
              margin-right: 4px;
              font-size: 24px;
              // font-weight: 600;
              color: #333;
            }
            p {
              position: relative;
              top: -4px;
              align-self: flex-end;
              font-size: 12px;
              color: #939599;
            }
          }
          .zhengshu{
            position: absolute;
            bottom: -36px;
            width: 100px;
            height: 20px;
            background: #E8FBF6;
            border: 1px solid #08A579;
            border-radius: 4px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #08A579;
            cursor: pointer;
          }
          .zhengshu:active{
            opacity: 0.8;
          }
        }
      }
    }
    .rili {
      position: relative;
      margin-top: 15px;
      .tiaojian {
        display: flex;
        align-items: center;
        // justify-content: right;
        position: absolute;
        right: 25px;
        top: 230px;
        /deep/.el-button, .el-dropdown{
          cursor: pointer;
          user-select: none;
        }
        .shichang {
          display: flex;
          align-items: center;
          margin-left: 50px;
          p {
            font-size: 14px;
            color: #666666;
            font-weight: bold;
          }
          span {
            display: inline-block;
            margin-left: 12px;
            width: 12px;
            height: 12px;
            border-radius: 1px;
          }
        }
      }
    }
    .classContent {
      position: relative;
      top: -110px;
      margin-left: 30px;
      padding-top: 30px;
      margin-bottom: 30px;
      border-top: 1px solid #dee0e3;
      .top {
        display: flex;
        margin-top: 0;
        h3 {
          font-size: 18px;
          color: #333;
        }
        .taps {
          position: relative;
          top: 3px;
          display: flex;
          align-items: center;
          margin-left: 40px;
          .tap {
            margin-right: 28px;
            font-size: 14px;
            color: #939599;
            cursor: pointer;
            user-select: none;
          }
          .choseTap {
            color: #08a579;
          }
        }
      }
      .classLists {
        .box {
          display: flex;
          margin-top: 20px;
          .left {
            width: 240px;
            height: 136px;
            border-radius: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
          .detalis {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            width: 380px;
            h4 {
              margin-top: 10px;
              margin-bottom: 10px;
              font-size: 14px;
              color: #333;
              width: 380px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            p {
              max-width: 380px;
              font-size: 12px;
              color: #333;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .right {
            position: relative;
            .study {
              position: absolute;
              bottom: 10px;
              text-align: center;
              line-height: 32px;
              font-size: 12px;
              width: 100px;
              height: 32px;
              background: #08a579;
              border-radius: 16px;
              color: #fff;
              cursor: pointer;
              user-select: none;
            }
            .study:active {
              opacity: 0.8;
            }
          }
        }
        .pic{
          text-align: center;
          margin-top: 40px;
          img{
            width: 200px;
          }
          p{  
            margin-top: 10px;
            font-size: 16px;
            color: #666;
          }
        }
      }
    }
    //下载学时证明弹窗
    .xiazaizs{
      /deep/.el-dialog{
        border-radius: 20px;
      }
      /deep/.el-dialog__header{
        padding: 10px 0 0 0;
      }
      /deep/.el-dialog__body{
        padding: 10px 40px;
      }
      /deep/.el-dialog__headerbtn:hover{
        i{
          color: #08a579;
        }
      }

      /deep/.el-date-editor .el-range__icon{
        display: none;
      }
      /deep/.el-dialog__headerbtn .el-dialog__close{
        font-size: 22px;
        font-weight: 600;
      }
      /deep/.el-range-editor.is-active, .el-range-editor.is-active:hover{
        border-color:#08A579;
      }
      /deep/.el-date-table td.today span{
        color: #08a579;
      }
      /deep/.el-date-table td span:hover{
        color: #08a579;
      }
      /deep/.el-select {
        margin-left: 20px;
        width: 90px;
        height: 40px;
      }
      /deep/.el-select .el-input__inner {
        // border-radius: 20px;
        height: 38px;

      }
      /deep/.el-select > .el-input {
        width: 100%;
      }
      h2{
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
        line-height: 36px;
        color: #333;
      }
      .boxTop{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        span{
          margin-right: 10px;
        }
        .chaxun{
          margin-left: auto;
          width: 120px;
          height: 40px;
          background: #08A579;
          border-radius: 4px;
          text-align: center;
          line-height: 40px;
          color: #FFF;
          font-size: 14px;
          cursor: pointer;
          user-select: none;
        }
        .chaxun:active{
          opacity: .8;
        }
      }
      .biao{
        display: flex;
        div{
          text-align: center;
          line-height: 44px;
          font-size: 14px;
          color: #646566;
          border-top: 1px solid #E6E6E6;
          border-left: 1px solid #E6E6E6;
          border-bottom: 1px solid #E6E6E6;
        }
        .leibie{
          width: 115px;
        }
        .name{
          width: 102px;
        }
        .sjd{
          width: 220px;
        }
        .nj{
          width: 102px;
        }
        .zsc{
          width: 155px;
        }
        .xxzs{
          width: 105px;
        }
        .dosome{
          width: 155px;
          border-right: 1px solid #E6E6E6;
        }
      }
      .biaoList{
        div{
          border-top: none;
        }
        .dosome{
          display: flex;
          justify-content: space-around;
          span{
            cursor: pointer;
            user-select: none;
          }
          span:active{
            opacity: 0.8;
          }
        }
      }
      .msg{
        margin-top: 60px;
        margin-bottom: 50px;
        width: 732px;
        height: 117px;
        background: #F5F5F5;
        border-radius: 10px;
        overflow: hidden;
        p{
          margin-left: 30px;
          line-height: 24px;
          span{
            color: #08A579;
            text-decoration: underline;
            cursor: pointer;
            user-select: none;
          }
          span:active{
            opacity: 0.8;
          }
        }
      }
    }
    //个人信息验证弹窗
    .yanzheng{
      /deep/.el-dialog{
        border-radius: 20px;
      }
      /deep/.el-dialog__header{
        padding: 10px 0 0 0;
      }
      /deep/.el-dialog__body{
        padding: 10px 40px;
      }
      /deep/.el-dialog__headerbtn:hover{
        i{
          color: #08a579;
        }
      }

      /deep/.el-date-editor .el-range__icon{
        display: none;
      }
      /deep/.el-dialog__headerbtn .el-dialog__close{
        font-size: 22px;
        font-weight: 600;
      }
      /deep/.el-input{
        width:300px ;
      }
      /deep/.el-select .el-input .el-select__caret{
        position: relative;
        left: -68px;
      }
      h2{
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
        line-height: 36px;
        color: #333;
      }
      .xinxiContent{
        margin-bottom: 16px;
        .biao{
          display: flex;
          align-items: center;
          line-height: 44px;
          border: 1px solid #E6E6E6;
          border-bottom: none ;
          .left{
            text-align: center;
            width: 120px;
            height: 44px;
            line-height: 44px;
            color: #646566;
            border-right: 1px solid #E6E6E6;
          }
          .right{
            position: relative;
            text-align: center;
            width: 318px;
            input {
              text-align: center;
              width: 300px;
              height: 30px;
              font-size: 14px;
              border: 0;
              outline: none;
              color: #646566;
            }
            .yzm{
              position: absolute;
              right: 0px;
              color: #08a579;
              cursor: pointer;
              user-select: none;
            }
            .yzm:active{
              opacity: 0.8;
            }
            /deep/.el-select .el-input .el-select__caret{
              font-size: 16px;
              color: #646566;
            }
            /deep/.el-select .el-input__inner{
              text-align: center;
              padding: 0;
              border: none;
            }
            /deep/.el-input__suffix{
              right: -78px;
            }
            .adreess {
              position: relative;
              cursor: pointer;
              .select_color {
                color: #08a579;
                font-weight: 600;
                i {
                  color: #08a579;
                }
              }
              // .icon_style {
              //   transform: rotate(180deg);
              // }
              .jiantou {
                color: #646566;
                font-size: 16px;
              }
              .adreessBox {
                display: flex;
                position: absolute;
                top: 40px;
                left: 0;
                z-index: 1000;
                background-color: #fff;
                box-shadow: 0px 0px 20px 4px #ccc;
                border-radius: 4px;
                transition: 1s;
                .box {
                  margin-top: 10px;
                  padding: 0px 15px 10px 40px;
                  width: 170px;
                  height: 250px;
                  -ms-overflow-style: none; /* IE 10+ */
                  scrollbar-width: none; /* Firefox */
                  overflow-y: scroll;
                  .list {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 40px;
                    cursor: pointer;
                  }
                }
                .preBox {
                  border-right: 1px solid #ccc;
                }
                .cityBox {
                  border-right: 1px solid #ccc;
                }
                ::-webkit-scrollbar {
                  display: none; /* Chrome Safari */
                }
              }
            }
          }
        }
        .biao:last-of-type{
          border-bottom: 1px solid #E6E6E6;
        }
      }
      .tips {
        margin-bottom: 30px;
        font-size: 12px;
        color: #969699;
        span {
          color: #f6444e;
        }
      }
      .submit {
        margin: 0 auto;
        margin-bottom: 40px;
        line-height: 40px;
        text-align: center;
        width: 120px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
      .submit:active {
        opacity: 0.8;
      }
    }
    //查询和生成证书弹窗
    .chaxun{
      /deep/.el-dialog{
        border-radius: 20px;
      }
      /deep/.el-dialog__header{
        padding: 10px 0 0 0;
      }
      /deep/.el-dialog__body{
        padding: 10px 40px;
      }
      /deep/.el-dialog__headerbtn:hover{
        i{
          color: #08a579;
        }
      }
      /deep/.el-date-editor .el-range__icon{
        display: none;
      }
      /deep/.el-dialog__headerbtn .el-dialog__close{
        font-size: 22px;
        font-weight: 600;
      }
      h2{
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
        line-height: 36px;
        color: #333;
      }
      .zhengshuType{
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        // justify-content: space-between;
        // margin-left: 28px;
        .type1 {
          display: flex;
          align-items: center;
          margin-right: 20px;
          color: #646566;
          cursor: pointer;
          user-select: none;
          img {
            margin-right: 5px;
            width: 14px;
            height: 14px;
            
          }
        }
      }
      .xinxiContent{
        margin-bottom: 16px;
        .biao{
          display: flex;
          align-items: center;
          line-height: 44px;
          border: 1px solid #E6E6E6;
          border-bottom: none ;
          .left{
            text-align: center;
            width: 120px;
            height: 44px;
            line-height: 44px;
            color: #646566;
            border-right: 1px solid #E6E6E6;
          }
          .right{
            position: relative;
            text-align: center;
            width: 318px;
          }
        }
        .biao:last-of-type{
          border-bottom: 1px solid #E6E6E6;
        }
      }
      .biao{
        display: flex;
        div{
          text-align: center;
          line-height: 44px;
          font-size: 14px;
          color: #646566;
          border-top: 1px solid #E6E6E6;
          border-left: 1px solid #E6E6E6;
          border-bottom: 1px solid #E6E6E6;
        }
        .leibie{
          width: 115px;
        }
        .name{
          width: 102px;
        }
        .sjd{
          width: 220px;
        }
        .nj{
          width: 102px;
        }
        .zsc{
          width: 155px;
        }
        .xxzs{
          width: 105px;
        }
        .dosome{
          width: 155px;
          border-right: 1px solid #E6E6E6;
        }
      }
      .biaoList{
        div{
          border-top: none;
        }
        .dosome{
          display: flex;
          justify-content: space-around;
          span{
            cursor: pointer;
            user-select: none;
          }
          span:active{
            opacity: 0.8;
          }
        }
      }
      .tips {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 12px;
        color: #969699;
        span {
          color: #f6444e;
        }
      }
      .submit {
        margin: 0 auto;
        margin-bottom: 40px;
        line-height: 40px;
        text-align: center;
        width: 120px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
      .submit:active {
        opacity: 0.8;
      }
    }
    //学时证书图片
    .zsPic{
      /deep/.el-dialog{
        border-radius: 20px;
        overflow: hidden;
        padding: 0 20px;
      }
      /deep/.el-dialog__header{
        padding: 0;
        height: 40px;
      }
      /deep/.el-dialog__body{
        padding: 0;
      }
      /deep/.el-dialog__headerbtn:hover{
        i{
          color: #08a579;
        }
      }

      /deep/.el-date-editor .el-range__icon{
        // display: none;
      }
      /deep/.el-dialog__headerbtn .el-dialog__close{
        font-size: 22px;
        font-weight: 600;
        top: -8px;
        right: -12px;
      }
      .zhengshu{
        position: relative;
        // margin-top: 20px;
        text-align: center;
        width: 1123px;
        height: 794px;
        .ditu{
          width: 1123px;
          height: 794px;
        }
        .zhang{
          position: absolute;
          right: 90px;
          bottom: 70px;
          width: 172px;
          
        }
        .name{
          position: absolute;
          top: 136px;
          left: 100px;
          font-size: 18px;
          font-weight: 600;
          color: #333;
          line-height: 40px;
        }
        .wenan{
          position: absolute;
          top: 180px;
          left: 120px;
          width: 838px;
          text-align: left;
          font-size: 28px;
          // font-weight: 600;
          color: #333;
          line-height: 56px;
          text-indent:2em;
          font-family: 宋体;
          letter-spacing: 0.1em;
          color: #000;
        }
        .zhengming{
          position: absolute;
          bottom: 130px;
          left: 150px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          // line-height: 40px;
        }
        .bianhao{
          position: absolute;
          bottom: 100px;
          left: 120px;
          font-size: 20px;
          // font-weight: 600;
          color: #333;
        }
        .nyr{
          position: absolute;
          bottom: 148px;
          right: 158px;
          font-size: 29px;
          color: #333;
          /* font-weight: normal; */
          font-family: 宋体;
          letter-spacing: 0.12em;
        }
      }
      .submit {
        margin: 0 auto;
        margin-bottom: 20px;
        line-height: 40px;
        text-align: center;
        width: 120px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
      .submit:active {
        opacity: 0.8;
      }
    }
  }
}
</style>